<template>
  <div class="box classBox">
    <div class="Boxaside">
      <ul class="Bfeilei">
        <li><a href="#maletarget">男生</a></li>
        <li><a href="#femaletarget">女生</a></li>
        <li><a href="#pictarget">漫画</a></li>
        <li><a href="#pretarget">出版</a></li>
      </ul>
    </div>
    <div class="B-right">
      <ul class="Bmale BSlist">
        <h2><a name="maletarget">男生</a></h2>
        <li @click="goclassDetail(item, 'male')"  v-for = "(item,index) of list" :key = "index">
            <dl>
              <dt>
                <p>{{ item.name }}</p>
                <span>{{ item.bookCount }} </span>
              </dt>
              <dd>
                <img :src="item.bookCover[0]">
              </dd>
            </dl>
          </li>
      </ul>
      <ul class="Bfemale BSlist">
        <h2><a name="femaletarget">女生</a></h2>
        <li @click="goclassDetail(item, 'female')" v-for = "(item,index) of Flist" :key = "index">
          <dl>
            <dt>
              <p>{{ item.name }}</p>
              <span>{{ item.bookCount }} </span>
            </dt>
            <dd>
              <img :src="item.bookCover[0]">
            </dd>
          </dl>
        </li>
      </ul>
      <ul class="Bpic BSlist">
        <h2><a name="pictarget">漫画</a></h2>
        <li @click="goclassDetail(item, 'picture')" v-for = "(item,index) of Piclist" :key = "index">
          <dl>
            <dt>
              <p>{{ item.name }}</p>
              <span>{{ item.bookCount }} </span>
            </dt>
            <dd>
              <img :src="item.bookCover[0]">
            </dd>
          </dl>
        </li>
      </ul>
      <ul class="Bpre BSlist">
        <h2><a name="pretarget">出版</a></h2>
        <li @click="goclassDetail(item, 'press')" v-for = "(item,index) of Prelist" :key = "index">
          <dl>
            <dt>
              <p>{{ item.name }}</p>
              <span>{{ item.bookCount }} </span>
            </dt>
            <dd>
              <img :src="item.bookCover[0]">
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Indicator } from 'mint-ui'
Vue.use(Indicator)
export default{
  data () {
    return {
      list: [],
      Flist: [],
      Piclist: [],
      Prelist: []
    }
  },
  created () {
    Indicator.open('加载中...')
    fetch('/liang/cats/lv2/statistics')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        for (let i = 0; i < data.male.length; i++) {
          data.male[i].bookCover[0] = 'http://statics.zhuishushenqi.com' + data.male[i].bookCover[0]
        }
        this.list = data.male
        for (let i = 0; i < data.female.length; i++) {
          data.female[i].bookCover[0] = 'http://statics.zhuishushenqi.com' + data.female[i].bookCover[0]
        }
        this.Flist = data.female
        for (let i = 0; i < data.picture.length; i++) {
          data.picture[i].bookCover[0] = 'http://statics.zhuishushenqi.com' + data.picture[i].bookCover[0]
        }
        this.Piclist = data.picture
        for (let i = 0; i < data.press.length; i++) {
          data.press[i].bookCover[0] = 'http://statics.zhuishushenqi.com' + data.press[i].bookCover[0]
        }
        this.Prelist = data.press
        Indicator.close()
      })
  },
  methods: {
    goclassDetail (item, sexStyle) {
      console.log(item)
      this.$router.push({path: `/classifydetail?gender=${sexStyle}&major=${item.name}`})
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.classBox{
  @include flexbox();
  @include flex-direction();
  @include overflow();
  .Boxaside{
    @include rect(20%, auto);
    float: left;
    .Bfeilei{
      li{
        @include rect(100%, 0.44rem);
        line-height:0.44rem;
        text-align: center;
      }
    }
  }
  .B-right{
    @include rect(80%, 100%);
    @include background-color(#f4f4f4)
    @include overflow()
    float: right;
    .BSlist{
      @include rect(80%, auto);
      @include flexbox();
      @include justify-content(space-around);
      flex-wrap:wrap;
      h2{
        @include rect(100%, 0.5rem);
        text-align:center;
        line-height: 0.5rem
      }
      li{
        dl{
          @include rect(1rem, 1.2rem);
          padding: 0 0.1rem;
          margin:0.05rem 0;
          @include flexbox();
          @include background-color(#fff)
          @include justify-content(space-around);
          @include align-items();
          img{
            @include rect(0.5rem, auto);
          }
        }
      }
    }
  }
}
</style>
